<template>
  <div
    class="product-item box flex flex-cc click"
    :class="isDetail ? 'opacity' : ''"
    @click="router.push(`/product/detail?id=${v.id}`)"
  >
    <!-- 封面 -->
    <div class="flex-fs-0 mr-10">
      <van-image class="cover radius radius--lg" :src="v.image"></van-image>
    </div>

    <!-- 数据 -->
    <div>
      <!-- 标签 -->
      <div v-if="!isDetail">
        <van-tag
          class="mr-5"
          type="danger"
          v-for="(t, i) in v.guarantee || []"
          :key="i"
        >
          {{ t.name }}
        </van-tag>
      </div>

      <div class="fz-12">
        <!-- 名称 -->
        <div class="fz-14 hide-2">{{ v.title }}</div>

        <div>
          <span>原价：</span>
          <span>{{ v.marketprice }} U</span>
        </div>

        <div>
          <span>现价：</span>
          <span>{{ v.price }} U</span>
        </div>

        <div v-if="isDetail">
          <div>
            <span>库存：</span>
            <span>未接入 </span>
          </div>
        </div>

        <div class="cl-success" v-else>
          <span>预计空投额：</span>
          <span>未接入 PC</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['v', 'isDetail'])
const router = useRouter()
</script>

<style lang="scss" scoped>
.product-item {
  .cover {
    width: 100px;
    height: 100px;
  }
}
</style>
